<template>
	<view class="order-detail-info" v-if="orderInfo.typeid">
		<view class="bg"></view>
		<view class="order-type">
			<view class="type-con">	
			<view class="order-title" style="text-align: right;color: #ff4a50;" v-if="orderInfo.merchant_member_id!='0'">月结订单</view>
			<template v-if="orderInfo.status==1">
				<text class="order-title">待付款</text>	
				<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
			</template>
				<template v-if="orderInfo.status==2">					
					<block>
						<text class="order-title">待核销</text>
						<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
						<view class="order-text5">订单已支付：￥<text style="font-size: 80rpx;">{{orderInfo.totalprice}}</text>元</view>
						
					</block>
					
					<view class="order-pay-info">	
						<view v-if="orderInfo.is_repair_price=='1' && orderInfo.scenepay.length<1">预付订金，请到售票处补款后使用</view>
						<view v-else>{{orderInfo.paytype_name}}</view>
					</view>
					<template v-if="orderInfo.merchant_member_id =='0'">
						<view style="display: flex;flex-direction: row;justify-content: space-between;">
							<view class="order-btn-con" style="width:47%;margin-bottom: 20rpx;">		
								<view class="hxbtn" @click="sceneCashPay">现金补差价</view>
							</view>
							<view class="order-btn-con" style="width:47%;margin-bottom: 20rpx;">
								<view class="hxbtn" @click="sceneScanPay">扫码补差价</view>
							</view>
						</view>
						<block v-if="orderInfo.suits[0].not_allowed_wxpay=='0'">
							<block v-if="!orderInfo.can_scene_pay" >
								<view class="order-btn-con" style="margin-bottom: 20rpx;">		
									<view class="hxbtn" @click="setScenePay">开启微信补差价</view>
								</view>
							</block>					
							<block v-if="orderInfo.can_scene_pay">
								<view class="order-btn-con" style="margin-bottom: 20rpx;">		
									<view class="hxbtn"  @click="cancelScenePay">等待微信补差价{{orderInfo.can_scene_pay.money}}元</view>
								</view>
							</block>
						</block>
					</template>
					<template v-if="orderInfo.merchant_member_id !='0'">
						<block v-if="!orderInfo.can_monthlysettle_pay">
							<view style="display: flex;flex-direction: row;justify-content: space-between;">
								<view class="order-btn-con" style="width:47%;margin-bottom: 20rpx;">	
									<view class="hxbtn" @click="setMonthlysettlePay">开启月结补差价</view>							
								</view>
								<view class="order-btn-con" style="width:47%;margin-bottom: 20rpx;">
									<view class="hxbtn" @click="setMonthlysettlePay2">月结补差价</view>							
								</view>
							</view>
						</block>
						<block v-if="orderInfo.can_monthlysettle_pay">
							<view class="order-btn-con" style="margin-bottom: 20rpx;">		
								<view class="hxbtn"  @click="cancelMonthlysettlePay">等待月结补差价{{orderInfo.can_monthlysettle_pay.money}}元</view>
							</view>
						</block>
					</template>
				</template>
				<template v-if="orderInfo.status==3">
					<text class="order-title">已关闭</text>
					<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
					<view class="order-text">订单已关闭，请重新下单</view>					
				</template>
				<template v-if="orderInfo.status==6">
					<view class="order-title">退款中</view>
					<view class="order-text">您的退款申请正在审核中</view>					
				</template>
				<template v-if="orderInfo.status==4">
					<text class="order-title">已退款</text>
					<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
					<view class="order-text">商家同意退款申请</view>					
				</template>
				<template v-if="orderInfo.status==5">
					<text class="order-title">已完成</text>
					<text style="margin-left: 100rpx;">订单编号 {{orderInfo.ordersn}}</text>
					<view class="order-text">此订单已消费</view>	
				</template>
				<template v-if="orderInfo.status==7">
					<view class="order-title">已完成</view>
					<view class="order-text">此订单已消费</view>					
				</template>				
			</view>
		</view>
		<view class="order-info" v-if="orderInfo.typeid != 198">
			<view class="title-bar">订单信息 
					<view class="order-btn-con" style="position: absolute;width:250rpx;right: 20rpx;top:0">
						<view class="hxbtn" style="font-size:34rpx;height: 60rpx;line-height: 60rpx;background: linear-gradient(-90deg, #00aa00 0%, #0bbe0b 100%);" @click="toManageOrders">更多订单</view>
					</view></view>
			<view class="info-con">				
				<!-- 线路 -->
				<template v-if="orderInfo.typeid==1">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订人群</view>
							<view class="datas-bd">{{numberStr}}</view>
						</view>
					</view>
				</template>
				
				<!-- 酒店 -->
				<template v-else-if="orderInfo.typeid==2">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}} - {{orderInfo.departdate}} {{orderInfo.days}}晚</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
					<view class="types-text">如需提前入住/延迟退房，请与酒店协商</view>
				</template>
				
				<!-- 租车 -->
				<template v-else-if="orderInfo.typeid==3">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}} - {{orderInfo.departdate}} （{{orderInfo.days}}天）</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.self_pickup">
							<view class="datas-hd">提车地址</view>
							<view class="address-item" @click="mapLocation">
								<view class="text">{{orderInfo.self_pickup.address}}</view>
								<view class="icon">
									<img class="img" src="https://static.member.stourweb.cn/uniapp/static/images/uni-spots-site-icon.png" alt="">
									<view class="title-text">地图</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				
				<!-- 景点 -->
				<template v-else-if="orderInfo.typeid==5">
					<view class="product-datas" v-for="(item,index) in orderInfo.suits" :key="index">
						<view class="datas-item" v-if="item.suit_name">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{item.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="item.usedate">
							<view class="datas-hd">游玩日期</view>
							<view class="datas-bd">{{item.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{item.dingnum}}</view>
						</view>
					</view>	
				</template>
				
				<!-- 渡轮 -->
				<template v-else-if="orderInfo.typeid==888">
					<view class="product-title" style="font-size: 50rpx; color: red;">{{orderInfo.productname}}</view>
					<view class="product-datas" v-for="(item,index) in orderInfo.suits" :key="index">
						<view class="datas-item" v-if="item.suit_name">
							<view class="datas-hd">车辆类型</view>
							<view class="datas-bd">{{item.suit_name}} <text style="color: red; margin:0 10rpx;">x {{item.dingnum}}</text><text style="color: red;">辆</text></view>
						</view>
						<view class="datas-item" v-if="item.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{item.usedate}}</view>
						</view>
						<view class="datas-item" v-if="item.flight">
							<view class="datas-hd">航班时间</view>
							<view class="datas-bd">{{item.flight}}</view>
						</view>
						
						<view class="datas-item">
							<view class="datas-hd">车辆实付</view>
							<view class="datas-bd" style="color: red;">{{item.price * item.num}}元</view>
						</view>
						<view class="datas-item" v-if="item.drivernum>0">
							<view class="datas-hd">司机人数</view>
							<view class="datas-bd" style="color: red;">{{item.drivernum}}人</view>
						</view>
						<view class="datas-item" v-if="item.drivernum>0">
							<view class="datas-hd">司机实付</view>
							<view class="datas-bd" style="color: red;">{{item.driverprice * item.drivernum}}元</view>
						</view>
						<view class="datas-item" v-if="orderInfo.status==2">
							<view class="datas-hd">支付方式</view>
							<view class="datas-bd">{{orderInfo.paysource}}</view>
						</view>
						<block v-for="item in orderInfo.scenepay">
							<view class="datas-item" v-if="item.productname">
								<view class="datas-hd">补差价</view>
								<view class="datas-bd" style="color: red;">{{item.money}}元</view>
							</view>
							<view class="datas-item" v-if="item.remark">
								<view class="datas-hd">备注</view>
								<view class="datas-bd">{{item.remark}}</view>
							</view>
						</block>
						<view class="order-btn-con" v-if="orderInfo.status==2">							
							<block v-if="manageInfo.issupper=='1'">
								<block v-if="manageInfo.checkwharf.indexOf('1')!=-1 && (orderInfo.productautoid=='1' || orderInfo.productautoid=='2')">
									<view class="hxbtn" @click="complete">确定核销</view>
								</block>
								<block v-else-if="manageInfo.checkwharf.indexOf('2')!=-1 && orderInfo.productautoid=='3'">
									<view class="hxbtn" @click="complete">确定核销</view>
								</block>
								<block v-else-if="manageInfo.checkwharf.indexOf('3')!=-1 && orderInfo.productautoid=='4'">
									<view class="hxbtn" @click="complete">确定核销</view>
								</block>
								<block v-else>
									<view class="btn" style="color: red;font-size: 40rpx;">核销码头不正确</view>
								</block>
							</block>								
							<block v-else>
								<block v-if="orderInfo.usedate==todayDate()">
									<block v-if="manageInfo.checkwharf.indexOf('1')!=-1 && (orderInfo.productautoid=='1' || orderInfo.productautoid=='2')">
										<block v-if="productInfo.canchackflightid == orderInfo.verifyflightid">
											<view class="hxbtn" @click="complete">确定核销</view>
										</block>
										<block v-else>
											<view class="btn" style="color: red;font-size: 40rpx;">核销时间未开始</view>
										</block>
									</block>
									<block v-else-if="manageInfo.checkwharf.indexOf('2')!=-1 && orderInfo.productautoid=='3'">
										<block v-if="productInfo.canchackflightid == orderInfo.verifyflightid">
											<view class="hxbtn" @click="complete">确定核销</view>
										</block>
										<block v-else>
											<view class="btn" style="color: red;font-size: 40rpx;">核销时间未开始</view>
										</block>
									</block>
									<block v-else-if="manageInfo.checkwharf.indexOf('3')!=-1 && orderInfo.productautoid=='4'">
										<block v-if="productInfo.canchackflightid == orderInfo.verifyflightid">
											<view class="hxbtn" @click="complete">确定核销</view>
										</block>
										<block v-else>
											<view class="btn" style="color: red;font-size: 40rpx;">核销时间未开始</view>
										</block>
									</block>
									<block v-else>
										<view class="btn" style="color: red;font-size: 40rpx;">核销码头不正确</view>
									</block>
								</block>
								<block v-else>
									<block v-if="calculateDaysBetweenDates(orderInfo.usedate)<0">
										<view class="btn" style="color: red;font-size: 40rpx;">不是当天票</view>
									</block>
									<block v-else>
										<view class="btn" style="color: red;font-size: 40rpx;">此票已失效</view>
									</block>
								</block>
							</block>
							
						</view>
					</view>	
				</template>
				
				<!-- 团购 -->
				<template v-else-if="orderInfo.typeid==13">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.productname}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
				</template>
				
				<!-- 私人定制 -->
				<template v-else-if="orderInfo.typeid==14">
					<view class="product-datas">
						<view class="datas-item" v-if="orderInfo.departure">
							<view class="datas-hd">出发地</view>
							<view class="datas-bd">{{orderInfo.departure}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.destination">
							<view class="datas-hd">目的地</view>
							<view class="datas-bd">{{orderInfo.destination}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">出发日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.adultnum}}成人<block v-if="orderInfo.childnum !=0">,{{orderInfo.childnum}}儿童</block></view>
						</view>
					</view>
				</template>
				
				<!-- 邮轮 -->
				<template v-else-if="orderInfo.typeid==104">
				
					<view class="order-data">
						<view class="position-left">
							<view class="position-i"><text class="date">{{orderInfo.lineInfo.start_time}}</text> {{orderInfo.lineInfo.startcity}}</view>
							<view class="position-i"><text class="date">{{orderInfo.lineInfo.end_time}}</text> {{orderInfo.lineInfo.destcity}}</view>
						</view>
					</view>
					
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">已选房型</view>
							<view class="datas-bd">{{orderInfo.lineInfo.room}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">出发时间</view>
							<view class="datas-bd">{{orderInfo.lineInfo.date}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">房间数量</view>
							<view class="datas-bd">{{orderInfo.lineInfo.dingnum}}间</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订人数</view>
							<view class="datas-bd">{{orderInfo.lineInfo.peoplenum}}</view>
						</view>
					</view>
					
					<view class="add-data" v-if="orderInfo.attach && orderInfo.attach.length">
						<view class="add-tit">附加产品</view>
						<view class="add-con">
							<view class="add-item" v-for="(item,index) in orderInfo.attach" :key="index" v-if="item.num>0">
								<view class="name">{{item.name}}</view>
								<view class="num">× {{item.num}}{{item.unit}}</view>
							</view>
						</view>
					</view>
				
				</template>
					
				<!-- 导游 -->
				<template v-else-if="orderInfo.typeid==106">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">预订时间</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">导游名称</view>
							<view class="datas-bd">{{orderInfo.guide_name}}</view>
						</view>
					</view>
				</template>
				
				<!-- 户外活动 -->
				<template v-else-if="orderInfo.typeid==114">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">使用日期</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						
						<view class="datas-item">
							<view class="datas-hd">预订人群</view>
							<view class="datas-bd">{{orderInfo.dingnum}}成人<block v-if="orderInfo.childnum !=0">,{{orderInfo.childnum}}儿童</block></view>
						</view>
					</view>
				</template>
				
				<!-- 特产 -->
				<template v-else-if="orderInfo.typeid==118">
					<view class="product-datas">
						<view class="datas-item">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
				</template>
								
				<!-- 其他根据实际情况填写 -->
				<template v-else>
					<view class="product-datas">
						<view class="datas-item" v-if="orderInfo.suit_name">
							<view class="datas-hd">套餐名称</view>
							<view class="datas-bd">{{orderInfo.suit_name}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.usedate">
							<view class="datas-hd">预订时间</view>
							<view class="datas-bd">{{orderInfo.usedate}}</view>
						</view>
						<view class="datas-item" v-if="orderInfo.dingnum">
							<view class="datas-hd">预订数量</view>
							<view class="datas-bd">{{orderInfo.dingnum}}</view>
						</view>
					</view>
				</template>
			
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 订单详情头部
	 * @property {Boolean} isBtn 是否显示按钮（保险订单详情页使用）
	 * @property {Boolean} typeid 用typeid区分样式
	 * 
	 */
	// #ifdef MP-TOUTIAO
	import zijiePayButton from '@/ttcomponents/DyPayButton/index'
	// #endif
	import {count_down_close_time} from '../utils/utils.js'
	// #ifdef MP-TOUTIAO
	import toutiaoRate from '@/utils/tioutiao_rate.js'
	// #endif
	import { bMapToQQMap } from '@/utils/utils.js';
	export default {
		name: 'stVerifyOrderDetailHeader',
		props: {			
			status: {
				type: Number,
				default: 7
			},			
			typeid: {
				type: Number,
				default: 1
			},
			orderInfo: {
				type: Object,
				default() {
					return {}
				}
			},
			productInfo: {
				type: Object,
				default() {
					return {}
				}
			},
			manageInfo: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		components:{			
		},
		data() {
			return {
				
			};
		},
		watch:{
			
		},
		mounted() {
			
		},
		methods: {		
			todayDate() {
			  const today = new Date();
			  const year = today.getFullYear();
			  const month = String(today.getMonth() + 1).padStart(2, '0');
			  const day = String(today.getDate()).padStart(2, '0');
			  return `${year}-${month}-${day}`;
			},
			 calculateDaysBetweenDates(date1) {
			  // 获取两个日期对象的时间戳
			  let time1 = new Date(date1).getTime();
			  let time2 = new Date(this.todayDate()).getTime();
			  
			  // 计算相差的毫秒数，并将其转换为天数
			  let days = Math.floor((time2 - time1) / (1000 * 60 * 60 * 24));
			  console.log(days)
			  return days;
			},
			sceneCashPay(){
				let that = this
				uni.showModal({
					title: '输入现金补差价金额',
					content:'',
					editable:true,
					success(res) {
						if (res.confirm) {		
							if(res.content && !isNaN(parseFloat(res.content)))
							{
								that.$emit('sceneCashPay',res.content);
							}else{
								uni.showModal({
									title: '错误',
									content:'输入补差价金额不正确'
								})
							}
							
						}
					}
				})	
				//
			},
			sceneScanPay(){
				let that = this
				uni.showModal({
					title: '输入扫码补差价金额',
					content:'',
					editable:true,
					success(res) {
						if (res.confirm) {		
							if(res.content && !isNaN(parseFloat(res.content)))
							{
								that.$emit('sceneScanPay',res.content);
							}else{
								uni.showModal({
									title: '错误',
									content:'输入补差价金额不正确'
								})
							}
							
						}
					}
				})	
				//
			},
			setMonthlysettlePay2(){
				let that = this
				uni.showModal({
					title: '输入月结支付补差价金额',
					content:'',
					editable:true,
					success(res) {
						if (res.confirm) {		
							if(res.content && !isNaN(parseFloat(res.content)))
							{
								that.$emit('setMonthlysettlePay2',res.content);
							}else{
								uni.showModal({
									title: '错误',
									content:'输入补差价金额不正确'
								})
							}
							
						}
					}
				})	
				//
			},
			setMonthlysettlePay(){
				let that = this
				uni.showModal({
					title: '输入月结支付补差价金额',
					content:'',
					editable:true,
					success(res) {
						if (res.confirm) {		
							if(res.content && !isNaN(parseFloat(res.content)))
							{
								that.$emit('setMonthlysettlePay',res.content);
							}else{
								uni.showModal({
									title: '错误',
									content:'输入补差价金额不正确'
								})
							}
							
						}
					}
				})	
				//
			},
			cancelMonthlysettlePay(){
				let that = this
				uni.showModal({
					title: '提示',
					content:'确定要取消补差价吗',					
					success(res) {
						if (res.confirm) {		
							that.$emit('cancelMonthlysettlePay');							
						}
					}
				})	
			},
			setScenePay(){
				let that = this
				uni.showModal({
					title: '输入微信补差价金额',
					content:'',
					editable:true,
					success(res) {
						if (res.confirm) {		
							if(res.content && !isNaN(parseFloat(res.content)))
							{
								that.$emit('setScenePay',res.content);
							}else{
								uni.showModal({
									title: '错误',
									content:'输入补差价金额不正确'
								})
							}
							
						}
					}
				})	
				//
			},
			cancelScenePay(){
				let that = this
				uni.showModal({
					title: '提示',
					content:'确定要取消补差价吗',					
					success(res) {
						if (res.confirm) {		
							that.$emit('cancelScenePay');							
						}
					}
				})	
			},
			//完成
			complete(){
				this.$emit('complete');
			},
			// 立即支付
			payOrder() {
				this.$emit('payOrder');
			},
			toManageOrders(){
				this.$emit('toManageOrders');
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP-TOUTIAO */
	.toutiao-commemt-btn{
		background-color: #ffc600!important;
	}
	/* #endif */
	
	.order-detail-info {
		position: relative;
		z-index: 1;
		padding: 28rpx 24rpx 0;
		margin-bottom: 24rpx;
		font-size: $uni-font-size-sm;
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			width: 100%;
			height: 260rpx;
			background: linear-gradient(to right, #5BE181 0%, #11C586 100%);
			&:after{
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				background: linear-gradient(to bottom, transparent, #f6f6f6);
			}
			
		}

		.order-type {
			padding: 32rpx 24rpx 28rpx;
			margin-bottom: 20rpx;
			background-color: $uni-bg-color;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			z-index: 2;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				z-index: 1;
				height: 98rpx;
				background: linear-gradient(360deg, rgba(255,255,255,0.28) 0%, #defce6 100%);
			}
			.type-con{
				position: relative;
				z-index: 2;
				.order-title {
					font-size: 48rpx;
					font-weight: bold;
					color: #222;
				}
				.order-text{
					font-size: 48rpx;
					font-family: Arial, Arial;
					color: $uni-text-color-grey;
					line-height: 1.83;
					margin-top: 12rpx;
					.count-down{
						color: red;
					}
				}
				.order-text5{
					font-size: 48rpx;
					font-weight: bold;
					color: red;	
					.count-down{
						color: red;
					}
				}
				.order-pay-info{
					@extend .justifyspacec;
					color: $uni-text-color-grey;
					font-size: 48rpx;					
					.left {
						@extend .alignItems;
						.price {
							color: red;
							font-family: Arial, Helvetica, sans-serif;
							font-size: $uni-font-size-base;
							.num{
								font-size: 48rpx;
								font-weight: bold;
							}
						}
						.detail {
							margin-left: 14rpx;
							color: #9e9e9e;
							font-size: $uni-font-size-sm;
							.iconfont {
								margin-right: 6rpx;
								color: $uni-text-color-grey;
								font-size: $uni-font-size-base;
							}
						}
						
					}
				}
				.order-btn-con {
					@extend .displayflex;
					margin-top: 28rpx;
					text-align: center;
					.btn {
						@extend .flex1;
						box-sizing: border-box;
						height: 84rpx;
						line-height: 84rpx;
						border: 2rpx solid #e5e5e5;
						font-size: 30rpx;
						font-weight: bold;
						color: $uni-text-color-grey;
						border-radius: 42rpx;
						&:nth-child(2) {
							margin-left: 20rpx;
						}
						&.btn-yellow {
							color: $uni-text-color-inverse;
							background: linear-gradient(-90deg, #ff644e 0%, #ff8a2a 100%);
							border: none;
						}
					}
				}
			}
		}
		.order-btn-con {
					@extend .displayflex;
					margin-top: 28rpx;
					text-align: center;
					.hxbtn {
						@extend .flex1;
						font-size: 40rpx;
						border-radius: 42rpx;
						color: #fff;
						background: linear-gradient(-90deg, #ff644e 0%, #ff8a2a 100%);
						height: 100rpx;
						font-weight: bold;			
						line-height: 100rpx;														
					}
					.btn {
						@extend .flex1;
						box-sizing: border-box;
						height: 100rpx;
						line-height: 100rpx;
						border: 2rpx solid #e5e5e5;
						font-size: 40rpx;
						font-weight: bold;					
						border-radius: 42rpx;
						&:nth-child(2) {
							margin-left: 20rpx;
						}
						&.btn-yellow {
							color: $uni-text-color-inverse;
							background: linear-gradient(-90deg, #ff644e 0%, #ff8a2a 100%);
							border: none;
						}
					}
				}
		.order-info {
			padding: 28rpx 24rpx 20rpx;
			border-radius: 20rpx;
			background-color: $uni-bg-color;
			position: relative;
			z-index: 2;
			.title-bar{
				line-height: 1.24;
				font-size: 48rpx;
				font-weight: bold;
			}
			.info-con{
				padding-top: 10rpx;
				.product-title{
					line-height: 1.433;
					font-size: $uni-font-size-base;
					color: #222;
					font-weight: bold;
				}
			}
			.product-types{
				margin-bottom: 25rpx;
				font-size: $uni-font-size-base;
			}
			.product-datas{
				margin-top: 10rpx;
				border-bottom: 1px solid #efefef;
				&:last-child{
					border-bottom: none
				}
				.datas-item{
					@extend .displayflex;
					font-size: 40rpx;
					line-height: 1.54;
					
					.datas-hd{
						line-height: 60rpx;
						width: 250rpx;
						
					}					
					.datas-bd{						
						font-size: 40rpx;
						font-weight: bold;
						color: red;
					}
				}
			}
			.date-people-type,
			.booking-type {
				font-size: $uni-font-size-sm;
			}

			.date-people-type {
				margin-bottom: 50rpx;
				color: $uni-text-color-grey;
				font-family: "Arial";

				text {
					&:first-child {
						margin-right: 80rpx;
					}
				}
			}
			.ship-suit-name{
				font-size: $uni-font-size-base;
				margin-bottom: 10rpx;
				color: $uni-text-color-deep;
			}
			.ship-date-people-type{
				margin-bottom: 30rpx;
				color: $uni-text-color-grey;
				font-family: "Arial";
				@extend .justifyspacec
			}
			
			.order-data{
				font-size: 32rpx;
				margin-top: 24rpx;
				padding-left: 24rpx;
				position: relative;
				&:before{
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 63rpx;
					background: url("https://static.member.stourweb.cn/uniapp/static/images/ship-order-line-icon.jpg") no-repeat;
					background-size: contain;
				}
				.position-i{
					margin-bottom: 5rpx;
					@extend .alignItems;
					.date{
						width: 110rpx;
						font-family: Arial, Helvetica, sans-serif
					}
				}
			}
			
			.add-data{
				margin: 30rpx 0;
				.add-tit{
					font-size: 28rpx;
					color: #2dbb55;
				}
				.add-con{
					margin-top: 6rpx;
					.add-item{
						@extend .justifyspacec;
						color: #888;
						font-size: 24rpx;
						padding: 10rpx 0 0;
						.name{
							width: 70%;
							@extend .ellipse;
						}
					}
				}
			}

			

			.types-num {
				@extend .displayflex;
				margin-bottom: 30rpx;
				font-size: $uni-font-size-base;

				.name {
					margin-right: 66rpx;
				}
			}

			.date-info {
				@extend .displayflex;
				margin-bottom: 20rpx;
				text-align: center;
				font-size: $uni-font-size-base;

				.time {
					margin-top: 2rpx;
					font-size: 22rpx;
					color: $uni-text-color-grey;
				}

				.start,
				.end {
					margin: 0 16rpx;
				}

				.day {
					height: 32rpx;
					padding: 0 13rpx;
					margin: 0 30rpx;
					line-height: 32rpx;
					border-radius: 15rpx;
					font-size: $uni-font-size-mini;
					color: $uni-text-color-deep;
					border: 1rpx solid #bfbfbf;
				}
			}

			.types-text {
				font-size: $uni-font-size-mini;
				color: $uni-text-color-grey;
				padding-top: 0.4rem;
			}
		}
	}
	.customize-site{
		margin-bottom: 16rpx;
		.iconfont{
			margin: 0 16rpx;
			color: #474747;
		}
	}
	.num-price{
		margin-bottom: 18rpx;
		font-family: "Arial";
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		.f{
			margin-right: 70rpx;
		}
	}
	.address-item{
		width: 530rpx;
		height: 116rpx;
		border-radius: 10rpx;
		background: url('https://static.member.stourweb.cn/uniapp/static/images/uni-spots-site-bg.png');
		background-size: 100% 100%;
		position: relative;
		flex: 1;
		.text{
			font-size: 24rpx;
			color: #333333;
			line-height: 38rpx;
			margin: 20rpx 90rpx 20rpx 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.icon{
			position: absolute;
			right: 30rpx;
			top: 14rpx;
			bottom: 16rpx;
			.img{
				width: 48rpx;
				height: 48rpx;
			}
			.title-text{
				font-size: 22rpx;
				color: #666666;
				line-height: 38rpx;
			}
		}
	}
</style>
